<template>
	<view class="payment-bill-layout">
		<z-paging ref="pagingRef" v-model="dataList" @query="queryList">
			<template #top>
				<uv-navbar :title="title" :titleStyle="{fontSize:'18px'}" :placeholder="true" autoBack>
					<template #right>
						<text style="color: #5F56EF;" @tap="showDetail">抵扣明细</text>
					</template>
				</uv-navbar>
			</template>
			<!-- 账单信息 -->
			<view class="payment-bill-box">
				<!-- 账单头部信息 -->
				<view class="payment-bill-header">
					<text>待还{{typeText}}</text>
					<text>{{props.type == '货款' ? dataInfo.billUnpayAmount : dataInfo.assessUnpayAmount}}</text>
					<view class="payment-bill-header-bottom">
						<view class="payment-bill-header-bottom-item">
							<text>已还{{typeText}}</text>
							<text>{{props.type == '货款' ? dataInfo.billPayAmount : dataInfo.assessPayAmount}}</text>
						</view>
						<view class="payment-bill-header-bottom-item">
							<text>累计{{typeText}}</text>
							<text>{{props.type == '货款' ? dataInfo.billTotalAmount : dataInfo.assessTotalAmount}}</text>
						</view>
					</view>
				</view>
				<!-- 账单列表 -->
				<view class="payment-bill-list">
					<view class="payment-bill-list-item" v-for="item in dataList" :key="item.id" @tap="showBillDetail(item)">
						<view class="payment-bill-list-item-top">
							<text>{{getListTitle(item)}}</text>
							<text>{{getMoney(item)}}</text>
						</view>
						<view class="payment-bill-list-item-bottom">
							<text>{{dayjs(item.createTime).format('YYYY-MM-DD')}}</text>
							<view class="payment-bill-list-item-bottom-right">
								<text>详情</text>
								<xh-icon icon="icon_jiantou"></xh-icon>
							</view>
						</view>
						<view class="line"></view>
					</view>
				</view>
			</view>

		</z-paging>

	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import dayjs from 'dayjs'
	import { getAssessBillAmount,getAssessBillAmountList,getGoodsBillAmount,getGoodsBillAmountList,getWithdrawalRecordList } from '@/common/api/api.js'
	const props = defineProps(['type', 'agentId'])
	const title = ref('')
	const typeText = ref('')
	const pagingRef = ref(null)
	const dataList = ref([])
	const dataInfo = ref({
		assessPayAmount:0,
		assessTotalAmount:0,
		assessUnpayAmount:0,
		billPayAmount:0,
		billTotalAmount:0,
		billUnpayAmount:0,
	})
	// 抵扣明细
	const showDetail = () => {
		uni.navigateTo({
			url: `/pages/home/agent-manager/agent-info/payment-bill/deduction-details/deduction-details?type=${props.type}&agentId=${props.agentId || ''}`
		})
	}
	// 获取机具状态
	const getListTitle = (item)=>{
		if(props.type == '货款'){
			return `机具货款(${item.id})`
		}
		else{
			if(item.assessmentType == '01'){
				return `未激活(${item.ksnNo})`
			}
			else if(item.assessmentType == '02'){
				return `未绑定(${item.ksnNo})`
			}
			else if(item.assessmentType == '03'){
				return `伪激活(${item.ksnNo})`
			}
			return item.ksnNo
		}
	}
	const getMoney = (item)=>{
		if(props.type == '货款'){
			if(item.billUnpayAmount > 0){
				return `+${item.billUnpayAmount}`
			}
			else{
				return item.billUnpayAmount
			}
		}
		else{
			if(item.deductAmount > 0){
				return `+${item.deductAmount}`
			}
			else{
				return item.deductAmount
			}
		}
	}
	// 查看货款账单详情
	const showBillDetail = (item) => {
		const dataStr = decodeURIComponent(JSON.stringify(item))
		if (props.type == '考核') {
			uni.navigateTo({
				url: `/pages/home/agent-manager/agent-info/payment-bill/kh-bill-detail/kh-bill-detail?data=${dataStr}`
			})
		} else {
			uni.navigateTo({
				url: `/pages/home/agent-manager/agent-info/payment-bill/payment-bill-detail/payment-bill-detail?data=${dataStr}`
			})
		}

	}
	// 获取列表数据
	const queryList = async (pageNo) => {
		let params = {}
		if(!uni.$uv.test.empty(props.agentId)){
			params.agentId = props.agentId
		}
		if(props.type == '考核'){
			const resAmount = await getAssessBillAmount(params)
			dataInfo.value = resAmount.result
			const res = await getAssessBillAmountList(params, pageNo)
			const list = res.result
			if(pageNo == 1) {
				dataList.value = []
			}
			dataList.value = [...dataList.value,...list]
			pagingRef.value.completeByTotal(list,res.page.totalElements)
		}
		else{
			const resAmount = await getGoodsBillAmount(params)
			dataInfo.value = resAmount.result
			const res = await getGoodsBillAmountList(params, pageNo)
			const list = res.result
			if(pageNo == 1) {
				dataList.value = []
			}
			dataList.value = [...dataList.value,...list]
			pagingRef.value.completeByTotal(list,res.page.totalElements)
		}
		console.log(dataInfo.value)
	}
	onLoad(() => {
		title.value = `${props.type}账单`
		typeText.value = props.type == '考核' ? '金额' : '货款'
	})
</script>

<style lang="scss" scoped>
	.payment-bill-layout {
		background-color: #fff;
		min-height: 100vh;

		.payment-bill-box {
			padding: 0 30rpx 30rpx;

			.payment-bill-header {
				background-image: url('/static/operate/yy_byjy_bg@2x.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				color: #fff;
				padding: 30rpx;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;

				text:nth-child(1) {
					font-size: 28rpx;
					font-weight: bold;
				}

				text:nth-child(2) {
					font-size: 60rpx;
				}

				.payment-bill-header-bottom {
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					.payment-bill-header-bottom-item {
						display: flex;
						flex-direction: column;
						color: #fff;
						flex: 1;

						text:nth-child(1) {
							font-size: 26rpx;
							font-weight: 400;
						}

						text:nth-child(2) {
							font-size: 40rpx;
							margin-top: 10rpx;
						}
					}
				}
			}

			.payment-bill-list {
				padding-top: 10rpx;

				.payment-bill-list-item {
					padding: 30rpx 0;
					position: relative;

					.payment-bill-list-item-top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						text:nth-child(2) {
							color: $xh-orange-color;
						}
					}

					.payment-bill-list-item-bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						margin-top: 16rpx;

						.payment-bill-list-item-bottom-right {
							font-size: 24rpx;
							color: $xh-color-9;
							display: flex;
							align-items: center;
						}
					}
				}
			}
		}
	}
</style>